<template>
  <!-- <el-row>
    <el-form size="big" :inline="true">
      route.query:{{ route.query }}
      <el-form-item label="护理项目">
        <el-input
          v-model="customerName"
          placeholder="请输入护理项目"
          class="input-with-select"
          clearable
        >
          <template #append>
            <el-button icon="Search" align="center" @click="queryList" />
          </template>
        </el-input>
      </el-form-item>
    </el-form>
  </el-row> -->

  <div class="common-layout">
    <el-container direction="vertical">
      <el-aside class="careProjectInfo">
        <careProjectInfo
          :customerName="customerName"
          ref="left"
          :handleRowClick="handleRowClick"
        />
      </el-aside>

      <!-- 分割线 -->
      <div>
        <el-divider></el-divider>
      </div>

      <el-aside class="selectedCareService">
        <selectedCareService ref="right" :customerId="customerId" />
      </el-aside>
    </el-container>
  </div>
</template>

<script setup>
import { ref, toRef } from "vue";
import careProjectInfo from "@/views/healthButler/serviceFocus/careProjectInfo.vue";
import selectedCareService from "@/views/healthButler/serviceFocus/selectedCareService.vue";
import { useRoute } from "vue-router"; // 导入 useRouter;
// const { customerName } = defineProps(["customerName"]);
const route = useRoute();
let { customerId, customerName } = toRef(route, "query");
let left = ref(null);
let right = ref(null);

// const customerName = ref("");
const nurseCustomerName = ref("");
const queryParams = ref({
  customerName: "",
});
function queryList() {
  // console.log("查询方法被调用了");
  // console.log(queryParams.value.customerName);
  left.value.customerList();
  // console.log("左侧被调用了");
  // right.value.queryList();
}

function handleRowClick(row) {
  console.log(row.customerName);

  selectedCustomer = row;
  // nurseCustomerName.value = name;
  // console.log("点击的用户数据：", nurseCustomerName.value);
  right.value.queryList(row.customerName);
}
</script>

<style scoped>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.common-layout {
  margin-top: 20px;
}

/* 护理项目信息 */
.careProjectInfo {
  width: 1150px;
  height: 100%;
  border: 1px solid rgb(194, 194, 194);
  padding: 0;
  border-radius: 5px;
  background-color: #ffffff;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

/* 已购护理服务 */
.selectedCareService {
  width: 1150px;
  height: 100%;
  border: 1px solid rgb(194, 194, 194);
  border-radius: 5px;
}

/* 间距 */
.spacer {
  width: 20px; /* 或者你希望的间距大小 */
}
</style>
